import 'package:flutter/material.dart';
import 'package:youfangtong_module/widgets/my_colors.dart';

/// 工作台
class WorkBenchPage extends StatefulWidget {

  const WorkBenchPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _WorkBenchPageState();
  }

}

class _WorkBenchPageState extends State<WorkBenchPage> {

  // 选中的日期索引
  int dateIndex = 0;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(
            width: double.infinity,
            padding: const EdgeInsets.fromLTRB(20, 50, 20, 0),
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/workbench_background.png"),
                fit: BoxFit.fill
              )
            ),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  child: const Text(
                    "上海",
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white
                    ),
                  ),
                ),

                Row(
                  children: [
                    Container(
                      margin: const EdgeInsets.only(right: 5),
                      child: const Text(
                        "渠道中心 · 普陀中心 · 四组",
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold
                        ),
                      ),
                    ),
                    const Image(
                        width: 13,
                        height: 8,
                        image: AssetImage("assets/images/icon_arrow_down.png")
                    )
                  ],
                ),

                Container(
                  width: double.infinity,
                  margin: const EdgeInsets.only(top: 25),
                  padding: const EdgeInsets.symmetric(vertical: 20,horizontal: 15),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8),
                    boxShadow: [
                      BoxShadow(
                        color: MyColors.color_222222.withOpacity(0.1), // 阴影颜色（可以设置透明度）
                        offset: const Offset(0, 10), // 阴影偏移量（x轴和y轴方向）
                        blurRadius: 20.0, // 模糊半径（影响阴影扩散程度）
                        spreadRadius: 2.0, // 扩展半径（正值会使阴影扩大，负值会收缩）
                      )
                    ]
                  ),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Text(
                            "数据看板",
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: MyColors.color_222222
                            ),
                          ),

                          GestureDetector(
                            onTap: () => {},
                            child: Container(
                              margin: const EdgeInsets.only(left: 5),
                              child: const Image(
                                width: 14,
                                height: 14,
                                image: AssetImage("assets/images/icon_question_mark_gray.png"),
                              ),
                            )
                          ),

                          const Spacer(flex: 1),

                          SizedBox(
                            width: 90,
                            height: 22,
                            child: Row(
                              children: [
                                dateItem("日",0),
                                dateItem("周",1),
                                dateItem("月",2)
                              ],
                            ),
                          )
                        ],
                      ),

                      const SizedBox(height: 15),

                      Divider(height: 0.5,color: MyColors.color_E5E5E5),

                      const SizedBox(height: 20),

                      Row(
                        children: [
                          dataBoardItem("45", "已签公司"),
                          dataBoardItem("0", "维护门店"),
                          dataBoardItem("36", "报备")
                        ],
                      ),

                      const SizedBox(height: 10),

                      Row(
                        children: [
                          dataBoardItem("0", "带看"),
                          dataBoardItem("56", "大定"),
                          dataBoardItem("236", "成销")
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
          ),

          businessEnterTitle("拓展管理"),

          Row(
            children: [
              businessEnterItem("assets/images/icon_enter_qdgs.png", "渠道公司"),
              businessEnterItem("assets/images/icon_enter_qdmd.png","渠道门店"),
              businessEnterItem("assets/images/icon_enter_rcjy.png", "日常纪要"),
              businessEnterItem("assets/images/icon_enter_gj.png", "跟进")
            ],
          ),

          Row(
            children: [
              businessEnterItem("assets/images/icon_enter_ht.png", "合同"),
              businessEnterItem("assets/images/icon_enter_sk.png", "收款"),
              businessEnterItem("assets/images/icon_enter_xm.png", "项目"),
              Expanded(flex: 1, child: Container())
            ],
          ),

          businessEnterTitle("报备跟踪"),

          Row(
            children: [
              businessEnterItem("assets/images/icon_enter_ddgz.png", "订单跟踪"),
              businessEnterItem("assets/images/icon_enter_llgz.png", "楼盘跟踪"),
              Expanded(flex: 1, child: Container()),
              Expanded(flex: 1, child: Container())
            ],
          ),

          businessEnterTitle("业绩查询"),

          Row(
            children: [
              businessEnterItem("assets/images/icon_enter_gjyj.png", "跟进业绩"),
              businessEnterItem("assets/images/icon_enter_qyyj.png", "签约业绩"),
              businessEnterItem("assets/images/icon_enter_qdcj.png", "渠道成交"),
              businessEnterItem("assets/images/icon_enter_xmcj.png", "项目成交")
            ],
          ),

          Row(
            children: [
              businessEnterItem("assets/images/icon_enter_phb.png", "排行榜"),
              Expanded(flex: 3, child: Container())
            ],
          ),

          const SizedBox(height: 100)

        ],
      ),
    );
  }

  /// 日，周，月的 item
  Widget dateItem(String value,int currentIndex) {
    return GestureDetector(
      onTap: () => {
        setState(() {
          dateIndex = currentIndex;
        })
      },
      child: Container(
        width: 30,
        height: 22,
        color: dateIndex == currentIndex ? MyColors.color_FDEFEE : MyColors.color_F8F8F8,
        alignment: Alignment.center,
        child: Text(
          value,
          style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.bold,
              color: dateIndex == currentIndex ? MyColors.color_EF4034 : MyColors.color_9F9F9F
          ),
        ),
      ),
    );
  }

  /// 数据看板的 item
  Widget dataBoardItem(String value, String title) {
    return Expanded(
        flex: 1,
        child: Column(
          children: [
            Text(
              value,
              style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                  color: MyColors.color_222222
              ),
            ),

            const SizedBox(height: 3),

            Text(
              title,
              style: TextStyle(
                  fontSize: 12,
                  color: MyColors.color_9F9F9F
              ),
            )
          ],
        )
    );
  }

  /// 业务入口的标题
  Widget businessEnterTitle(String title) {
    return Container(
      margin: const EdgeInsets.fromLTRB(20, 30, 0, 5),
      alignment: Alignment.centerLeft,
      child: Text(
        title,
        style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: MyColors.color_222222
        ),
      ),
    );
  }

  /// 业务入口的Item
  Widget businessEnterItem(String imageUrl, String title) {
    return Expanded(
        flex: 1,
        child: GestureDetector(
          onTap: () => {},
          child: Column(
            children: [
              const SizedBox(height: 15),

              Image(
                width: 43,
                height: 43,
                image: AssetImage(imageUrl),
              ),

              const SizedBox(height: 10),

              Text(
                title,
                style: TextStyle(
                    fontSize: 12,
                    color: MyColors.color_7F7F7F
                ),
              )
            ],
          ),
        )
    );
  }

}